
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Reusing Reducer Logic · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="../../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="ImmutableUpdatePatterns.html" />
    
    
    <link rel="prev" href="UpdatingNormalizedData.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../../">
            
                <a href="../../">
            
                    
                    Read Me
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../../introduction/">
            
                <a href="../../introduction/">
            
                    
                    Introduction
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../../introduction/Motivation.html">
            
                <a href="../../introduction/Motivation.html">
            
                    
                    Motivation
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../../introduction/CoreConcepts.html">
            
                <a href="../../introduction/CoreConcepts.html">
            
                    
                    Core Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../../introduction/ThreePrinciples.html">
            
                <a href="../../introduction/ThreePrinciples.html">
            
                    
                    Three Principles
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="../../introduction/PriorArt.html">
            
                <a href="../../introduction/PriorArt.html">
            
                    
                    Prior Art
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="../../introduction/Ecosystem.html">
            
                <a href="../../introduction/Ecosystem.html">
            
                    
                    Ecosystem
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="../../introduction/Examples.html">
            
                <a href="../../introduction/Examples.html">
            
                    
                    Examples
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../../basics/">
            
                <a href="../../basics/">
            
                    
                    Basics
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="../../basics/Actions.html">
            
                <a href="../../basics/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="../../basics/Reducers.html">
            
                <a href="../../basics/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="../../basics/Store.html">
            
                <a href="../../basics/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="../../basics/DataFlow.html">
            
                <a href="../../basics/DataFlow.html">
            
                    
                    Data Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="../../basics/UsageWithReact.html">
            
                <a href="../../basics/UsageWithReact.html">
            
                    
                    Usage with React
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="../../basics/ExampleTodoList.html">
            
                <a href="../../basics/ExampleTodoList.html">
            
                    
                    Example: Todo List
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../../advanced/">
            
                <a href="../../advanced/">
            
                    
                    Advanced
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../../advanced/AsyncActions.html">
            
                <a href="../../advanced/AsyncActions.html">
            
                    
                    Async Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../../advanced/AsyncFlow.html">
            
                <a href="../../advanced/AsyncFlow.html">
            
                    
                    Async Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="../../advanced/Middleware.html">
            
                <a href="../../advanced/Middleware.html">
            
                    
                    Middleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="../../advanced/UsageWithReactRouter.html">
            
                <a href="../../advanced/UsageWithReactRouter.html">
            
                    
                    Usage with React Router
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="../../advanced/ExampleRedditAPI.html">
            
                <a href="../../advanced/ExampleRedditAPI.html">
            
                    
                    Example: Reddit API
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" >
            
                <span>
            
                    
                    Next Steps
            
                </span>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../">
            
                <a href="../">
            
                    
                    Recipes
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../MigratingToRedux.html">
            
                <a href="../MigratingToRedux.html">
            
                    
                    Migrating to Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../UsingObjectSpreadOperator.html">
            
                <a href="../UsingObjectSpreadOperator.html">
            
                    
                    Using Object Spread Operator
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../ReducingBoilerplate.html">
            
                <a href="../ReducingBoilerplate.html">
            
                    
                    Reducing Boilerplate
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="../ServerRendering.html">
            
                <a href="../ServerRendering.html">
            
                    
                    Server Rendering
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="../WritingTests.html">
            
                <a href="../WritingTests.html">
            
                    
                    Writing Tests
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="../ComputingDerivedData.html">
            
                <a href="../ComputingDerivedData.html">
            
                    
                    Computing Derived Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.7" data-path="../ImplementingUndoHistory.html">
            
                <a href="../ImplementingUndoHistory.html">
            
                    
                    Implementing Undo History
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.8" data-path="../IsolatingSubapps.html">
            
                <a href="../IsolatingSubapps.html">
            
                    
                    Isolating Subapps
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9" data-path="../StructuringReducers.html">
            
                <a href="../StructuringReducers.html">
            
                    
                    Structuring Reducers
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.9.1" data-path="PrerequisiteConcepts.html">
            
                <a href="PrerequisiteConcepts.html">
            
                    
                    Prerequisite Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.2" data-path="BasicReducerStructure.html">
            
                <a href="BasicReducerStructure.html">
            
                    
                    Basic Reducer Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.3" data-path="SplittingReducerLogic.html">
            
                <a href="SplittingReducerLogic.html">
            
                    
                    Splitting Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.4" data-path="RefactoringReducersExample.html">
            
                <a href="RefactoringReducersExample.html">
            
                    
                    Refactoring Reducers Example
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.5" data-path="UsingCombineReducers.html">
            
                <a href="UsingCombineReducers.html">
            
                    
                    Using combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.6" data-path="BeyondCombineReducers.html">
            
                <a href="BeyondCombineReducers.html">
            
                    
                    Beyond combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.7" data-path="NormalizingStateShape.html">
            
                <a href="NormalizingStateShape.html">
            
                    
                    Normalizing State Shape
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.8" data-path="UpdatingNormalizedData.html">
            
                <a href="UpdatingNormalizedData.html">
            
                    
                    Updating Normalized Data
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.5.9.9" data-path="ReusingReducerLogic.html">
            
                <a href="ReusingReducerLogic.html">
            
                    
                    Reusing Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.10" data-path="ImmutableUpdatePatterns.html">
            
                <a href="ImmutableUpdatePatterns.html">
            
                    
                    Immutable Update Patterns
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.11" data-path="InitializingState.html">
            
                <a href="InitializingState.html">
            
                    
                    Initializing State
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5.10" data-path="../UsingImmutableJS.html">
            
                <a href="../UsingImmutableJS.html">
            
                    
                    Using Immutable.JS with Redux
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../../FAQ.html">
            
                <a href="../../FAQ.html">
            
                    
                    FAQ
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../../faq/General.html">
            
                <a href="../../faq/General.html">
            
                    
                    General
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="../../faq/Reducers.html">
            
                <a href="../../faq/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="../../faq/OrganizingState.html">
            
                <a href="../../faq/OrganizingState.html">
            
                    
                    Organizing State
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="../../faq/StoreSetup.html">
            
                <a href="../../faq/StoreSetup.html">
            
                    
                    Store Setup
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="../../faq/Actions.html">
            
                <a href="../../faq/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="../../faq/ImmutableData.html">
            
                <a href="../../faq/ImmutableData.html">
            
                    
                    Immutable Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="../../faq/CodeStructure.html">
            
                <a href="../../faq/CodeStructure.html">
            
                    
                    Code Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="../../faq/Performance.html">
            
                <a href="../../faq/Performance.html">
            
                    
                    Performance
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="../../faq/ReactRedux.html">
            
                <a href="../../faq/ReactRedux.html">
            
                    
                    React Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.10" data-path="../../faq/Miscellaneous.html">
            
                <a href="../../faq/Miscellaneous.html">
            
                    
                    Miscellaneous
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../../Troubleshooting.html">
            
                <a href="../../Troubleshooting.html">
            
                    
                    Troubleshooting
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../../Glossary.html">
            
                <a href="../../Glossary.html">
            
                    
                    Glossary
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="../../api/">
            
                <a href="../../api/">
            
                    
                    API Reference
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.9.1" data-path="../../api/createStore.html">
            
                <a href="../../api/createStore.html">
            
                    
                    createStore
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.2" data-path="../../api/Store.html">
            
                <a href="../../api/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.3" data-path="../../api/combineReducers.html">
            
                <a href="../../api/combineReducers.html">
            
                    
                    combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.4" data-path="../../api/applyMiddleware.html">
            
                <a href="../../api/applyMiddleware.html">
            
                    
                    applyMiddleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.5" data-path="../../api/bindActionCreators.html">
            
                <a href="../../api/bindActionCreators.html">
            
                    
                    bindActionCreators
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.6" data-path="../../api/compose.html">
            
                <a href="../../api/compose.html">
            
                    
                    compose
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../../CHANGELOG.md">
            
                <span>
            
                    
                    Change Log
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.11" data-path="../../PATRONS.md">
            
                <span>
            
                    
                    Patrons
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.12" data-path="../../Feedback.html">
            
                <a href="../../Feedback.html">
            
                    
                    Feedback
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../.." >Reusing Reducer Logic</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="reusing-reducer-logic">Reusing Reducer Logic</h1>
<p>As an application grows, common patterns in <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> logic will start to emerge.  You may find several parts of your <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> logic doing the same kinds of work for different types of data, and want to reduce duplication by reusing the same common logic for each data type.  Or, you may want to have multiple &quot;instances&quot; of a certain type of data being handled in the <a href="../../Glossary.html#store" class="glossary-term" title="">store</a>.  However, the global structure of a Redux <a href="../../Glossary.html#store" class="glossary-term" title="">store</a> comes with some trade-offs: it makes it easy to track the overall <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> of an application, but can also make it harder to &quot;target&quot; actions that need to update a specific piece of <a href="../../Glossary.html#state" class="glossary-term" title="">state</a>, particularly if you are using <code>combineReducers</code>.</p>
<p>As an example, let&apos;s say that we want to track multiple counters in our application, named A, B, and C.  We define our initial <code>counter</code> <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a>, and we use <code>combineReducers</code> to set up our <a href="../../Glossary.html#state" class="glossary-term" title="">state</a>:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">counter</span>(<span class="hljs-params">state = 0, action</span>) </span>{
    <span class="hljs-keyword">switch</span> (action.type) {
        <span class="hljs-keyword">case</span> <span class="hljs-string">&apos;INCREMENT&apos;</span>:
            <span class="hljs-keyword">return</span> state + <span class="hljs-number">1</span>;
        <span class="hljs-keyword">case</span> <span class="hljs-string">&apos;DECREMENT&apos;</span>:
            <span class="hljs-keyword">return</span> state - <span class="hljs-number">1</span>;
        <span class="hljs-keyword">default</span>:
            <span class="hljs-keyword">return</span> state;
    }
}

<span class="hljs-keyword">const</span> rootReducer = combineReducers({
    counterA : counter,
    counterB : counter,
    counterC : counter
});
</code></pre>
<p>Unfortunately, this setup has a problem.  Because <code>combineReducers</code> will call each slice <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> with the same <a href="../../Glossary.html#action" class="glossary-term" title="">action</a>, dispatching <code>{type : &apos;INCREMENT&apos;}</code> will actually cause <em>all three</em> counter values to be incremented, not just one of them.  We need some way to wrap the <code>counter</code> logic so that we can ensure that only the counter we care about is updated.</p>
<h2 id="customizing-behavior-with-higher-order-reducers">Customizing Behavior with Higher-Order Reducers</h2>
<p>As defined in <a href="SplittingReducerLogic.html">Splitting Reducer Logic</a>, a <em>higher-order <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a></em> is a function that takes a <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> function as an argument, and/or returns a new <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> function as a result.  It can also be viewed as a &quot;<a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> factory&quot;.  <code>combineReducers</code> is one example of a higher-order <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a>.  We can use this pattern to create specialized versions of our own <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> functions, with each version only responding to specific actions.</p>
<p>The two most common ways to specialize a <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> are to generate new <a href="../../Glossary.html#action" class="glossary-term" title="">action</a> constants with a given prefix or suffix, or to attach additional info inside the <a href="../../Glossary.html#action" class="glossary-term" title="">action</a> object.  Here&apos;s what those might look like:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createCounterWithNamedType</span>(<span class="hljs-params">counterName = &apos;&apos;</span>) </span>{
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">counter</span>(<span class="hljs-params">state = 0, action</span>) </span>{
        <span class="hljs-keyword">switch</span> (action.type) {
            <span class="hljs-keyword">case</span> <span class="hljs-string">`INCREMENT_<span class="hljs-subst">${counterName}</span>`</span>:
                <span class="hljs-keyword">return</span> state + <span class="hljs-number">1</span>;
            <span class="hljs-keyword">case</span> <span class="hljs-string">`DECREMENT_<span class="hljs-subst">${counterName}</span>`</span>:
                <span class="hljs-keyword">return</span> state - <span class="hljs-number">1</span>;
            <span class="hljs-keyword">default</span>:
                <span class="hljs-keyword">return</span> state;
        }
    }
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createCounterWithNameData</span>(<span class="hljs-params">counterName = &apos;&apos;</span>) </span>{
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">counter</span>(<span class="hljs-params">state = 0, action</span>) </span>{
        <span class="hljs-keyword">const</span> {name} = action;
        <span class="hljs-keyword">if</span>(name !== counterName) <span class="hljs-keyword">return</span> state;

        <span class="hljs-keyword">switch</span> (action.type) {
            <span class="hljs-keyword">case</span> <span class="hljs-string">`INCREMENT`</span>:
                <span class="hljs-keyword">return</span> state + <span class="hljs-number">1</span>;
            <span class="hljs-keyword">case</span> <span class="hljs-string">`DECREMENT`</span>:
                <span class="hljs-keyword">return</span> state - <span class="hljs-number">1</span>;
            <span class="hljs-keyword">default</span>:
                <span class="hljs-keyword">return</span> state;
        }
    }
}
</code></pre>
<p>We should now be able to use either of these to generate our specialized counter reducers, and then dispatch actions that will affect the portion of the <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> that we care about:</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> rootReducer = combineReducers({
    counterA : createCounterWithNamedType(<span class="hljs-string">&apos;A&apos;</span>),
    counterB : createCounterWithNamedType(<span class="hljs-string">&apos;B&apos;</span>),
    counterC : createCounterWithNamedType(<span class="hljs-string">&apos;C&apos;</span>),
});

store.dispatch({type : <span class="hljs-string">&apos;INCREMENT_B&apos;</span>});
<span class="hljs-built_in">console</span>.log(store.getState());
<span class="hljs-comment">// {counterA : 0, counterB : 1, counterC : 0}</span>
</code></pre>
<p>We could also vary the approach somewhat, and create a more generic higher-order <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> that accepts both a given <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> function and a name or identifier:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">counter</span>(<span class="hljs-params">state = 0, action</span>) </span>{
    <span class="hljs-keyword">switch</span> (action.type) {
        <span class="hljs-keyword">case</span> <span class="hljs-string">&apos;INCREMENT&apos;</span>:
            <span class="hljs-keyword">return</span> state + <span class="hljs-number">1</span>;
        <span class="hljs-keyword">case</span> <span class="hljs-string">&apos;DECREMENT&apos;</span>:
            <span class="hljs-keyword">return</span> state - <span class="hljs-number">1</span>;
        <span class="hljs-keyword">default</span>:
            <span class="hljs-keyword">return</span> state;
    }
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createNamedWrapperReducer</span>(<span class="hljs-params">reducerFunction, reducerName</span>) </span>{
    <span class="hljs-keyword">return</span> (state, action) =&gt; {
        <span class="hljs-keyword">const</span> {name} = action;
        <span class="hljs-keyword">const</span> isInitializationCall = state === <span class="hljs-literal">undefined</span>;
        <span class="hljs-keyword">if</span>(name !== reducerName &amp;&amp; !isInitializationCall) <span class="hljs-keyword">return</span> state;

        <span class="hljs-keyword">return</span> reducerFunction(state, action);    
    }
}

<span class="hljs-keyword">const</span> rootReducer = combineReducers({
    counterA : createNamedWrapperReducer(counter, <span class="hljs-string">&apos;A&apos;</span>),
    counterB : createNamedWrapperReducer(counter, <span class="hljs-string">&apos;B&apos;</span>),
    counterC : createNamedWrapperReducer(counter, <span class="hljs-string">&apos;C&apos;</span>),
});
</code></pre>
<p>You could even go as far as to make a generic filtering higher-order <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a>:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createFilteredReducer</span>(<span class="hljs-params">reducerFunction, reducerPredicate</span>) </span>{
    <span class="hljs-keyword">return</span> (state, action) =&gt; {
        <span class="hljs-keyword">const</span> isInitializationCall = state === <span class="hljs-literal">undefined</span>;
        <span class="hljs-keyword">const</span> shouldRunWrappedReducer = reducerPredicate(action) || isInitializationCall;
        <span class="hljs-keyword">return</span> shouldRunWrappedReducer ? reducerFunction(state, action) : state;
    }
}

<span class="hljs-keyword">const</span> rootReducer = combineReducers({
    <span class="hljs-comment">// check for suffixed strings</span>
    counterA : createFilteredReducer(counter, action =&gt; action.type.endsWith(<span class="hljs-string">&apos;_A&apos;</span>)),
    <span class="hljs-comment">// check for extra data in the action</span>
    counterB : createFilteredReducer(counter, action =&gt; action.name === <span class="hljs-string">&apos;B&apos;</span>),
    <span class="hljs-comment">// respond to all &apos;INCREMENT&apos; actions, but never &apos;DECREMENT&apos;</span>
    counterC : createFilteredReducer(counter, action =&gt; action.type === <span class="hljs-string">&apos;INCREMENT&apos;</span>)
};
</code></pre>
<p>These basic patterns allow you to do things like having multiple instances of a smart connected component within the UI, or reuse common logic for generic capabilities such as pagination or sorting.</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="UpdatingNormalizedData.html" class="navigation navigation-prev " aria-label="Previous page: Updating Normalized Data">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="ImmutableUpdatePatterns.html" class="navigation navigation-next " aria-label="Next page: Immutable Update Patterns">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"Reusing Reducer Logic","level":"1.5.9.9","depth":3,"next":{"title":"Immutable Update Patterns","level":"1.5.9.10","depth":3,"path":"recipes/reducers/ImmutableUpdatePatterns.md","ref":"./recipes/reducers/ImmutableUpdatePatterns.md","articles":[]},"previous":{"title":"Updating Normalized Data","level":"1.5.9.8","depth":3,"path":"recipes/reducers/UpdatingNormalizedData.md","ref":"./recipes/reducers/UpdatingNormalizedData.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["livereload"],"pluginsConfig":{"livereload":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"recipes/reducers/ReusingReducerLogic.md","mtime":"2017-03-13T14:28:11.366Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-03-15T14:47:19.389Z"},"basePath":"../..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>
    
        
        <script src="../../gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

